import React from "react";
import Page from "../../components/Page";
import {
    Content,
    FlexView,
    FlexViewCenter,
    LpCard,
    MainLargeButton,
    pledge_item_status,
    PledgeInfo,
    DangerTip,
    AdLp,
    MainButton, FlexViewBetween, PledgeItem, FishNFTRewardPool
} from "../../components/components";
import {colors, TimeStatusLabel} from "../../common/common";
import ImageCommon from "../../assets/image/common/ImageCommon";
import styled from "styled-components";
import {StyledTopBar} from "../../components/TopBar/TopBar";
import {useUpdateLogo} from "../../state/logoaction/hooks";
import useApprove, {ApprovalState} from "../../hooks/useApprove";
import useBasisCash from "../../hooks/useBasisCash";
import useYncLpInfo from "../../hooks/useYncLp";
import {BigNumber, ethers} from "ethers";
import {decimalToBalance} from "../../basis-cash/ether-utils";
import {DepoManager} from "../../components/ComponentsManager";
import {useTransactionAdder} from "../../state/transactions/hooks";
import {useTranslation} from "react-i18next";
import {useV1} from "../../state/v1action/hooks";
import useNycLpInfo from "../../hooks/useNycLp";
import { PledgeWrap } from "../home/Home";
const Fish_lp = [0,1,2,3,5];
const Atlantis = React.memo(()=>{
    useUpdateLogo(ImageCommon.logo);
    const v2 = useV1();
    const addTransaction = useTransactionAdder();
    const {t} = useTranslation();
    const basisCash = useBasisCash();
    const name = v2?"NYC":"YNC";
    const [approveStatus, approve] = useApprove(basisCash?.externalTokens?.[name+"_USDT_LP"], basisCash?.contracts[name+'_LP_REWARD_POOL']?.address);
    const lpInfo = v2?useNycLpInfo("usdt",v2):useYncLpInfo("usdt",v2);
    const token = basisCash?.externalTokens?.[name];
    const lpToken = basisCash?.externalTokens?.[name+"_USDT_LP"];
    const decimal = token?.decimal || 18;
    function onSubmit() {
        // 未授权
        if(approveStatus==ApprovalState.NOT_APPROVED){
            approve();
        }else {
            DepoManager.show({token:name+"_USDT_LP",displayBalance:lpInfo.myBalance,confirm:requestDepo,depo:true})
        }
    }

    // 提币
    function withDrawOld(){
        DepoManager.show({token:name+"_USDT_LP",displayBalance:lpInfo.myDepo,confirm:getRewardOld,depo:false})
    }

    async function requestDepo(amount:string) {
        const response = await basisCash?.stake(name+"_LP_REWARD_POOL",decimalToBalance(amount,decimal))
        addTransaction(response, {
            summary: t("stake")+`${lpToken.symbol}`,
            approval: {
                tokenAddress: lpToken.address,
                spender: "",
            },
        });
    }
    async function requestWithDraw(amount:string) {
        const response = await basisCash?.unstake(name+"_LP_REWARD_POOL",decimalToBalance(amount,decimal));
        addTransaction(response, {
            summary: t("withdraw")+`${lpToken.symbol}`,
            approval: {
                tokenAddress: lpToken.address,
                spender: "",
            },
        });
    }
    async function getReward() {
        const response = await basisCash?.harvest(name+"_LP_REWARD_POOL");
        addTransaction(response, {
            summary: t("claim")+`${token.symbol}`,
            approval: {
                tokenAddress: token.address,
                spender: "",
            },
        });
    }
    async function getRewardOld(amount:string) {
        const response = await basisCash?.unstake(name+"_LP_REWARD_POOL",decimalToBalance(amount,decimal));
        addTransaction(response, {
            summary: t("claim")+`${token.symbol}`,
            approval: {
                tokenAddress: token.address,
                spender: "",
            },
        });
    }
    async function withdrawAll() {
        const response = await basisCash?.exit(name+"_LP_REWARD_POOL");
        addTransaction(response, {
            summary: t("claim")+`${lpToken.symbol}`,
            approval: {
                tokenAddress: token.address,
                spender: "",
            },
        });
    }
    async function getUserMigrate() {
        const contract = basisCash?.contracts?.[name+"_LP_REWARD_POOL_OLD"];
        const response = await contract?.getUserMigrate();
        addTransaction(response, {
            summary: t("migrate")+`${lpToken.symbol}`,
            approval: {
                tokenAddress: contract?.address,
                spender: "",
            },
        });
    }
    return(
        <Page>
            <StyledTopBar
                bg={ImageCommon.banner_atlantis}
            >
            </StyledTopBar>
            <Content>
                <ContentWrap>
                    <InfoWrap>
                        <AmountWrap>
                            <FlexView>
                                <H4Title>{t("stakeLp")}</H4Title>
                                <Amount>{lpInfo.totalSupply}</Amount>
                            </FlexView>
                            <FlexView>
                                <H4Title>{t("tvl")}</H4Title>
                                <Amount>{lpInfo.tvl}</Amount>
                            </FlexView>
                        </AmountWrap>
                        <div
                            style={pledge_item_status}
                        >
                            {t(`${TimeStatusLabel[lpInfo.timeStatus]}`)}
                        </div>
                        <InfoContent>
                            <PledgeInfo
                                title={t("myDepo")}
                                value={lpInfo.myDepo}
                            ></PledgeInfo>
                            <PledgeInfo
                                title={t("myEarned")}
                                value={lpInfo.earned}
                            ></PledgeInfo>
                            <PledgeInfo
                                title={t("apr")}
                                value={lpInfo.apy}
                            ></PledgeInfo>
                            <PledgeInfo
                                title={t("apy")}
                                value={lpInfo.apr}
                            ></PledgeInfo>
                            <PledgeInfo
                                title={t("dailyBonus")}
                                value={lpInfo.dailyReward}
                            ></PledgeInfo>
                            <PledgeInfo
                                title={t("totalBonus")}
                                value={lpInfo.totalReward}
                            ></PledgeInfo>
                        </InfoContent>
                    </InfoWrap>

                    <CardWrap>
                        <LpCard
                            title={t("earned")+name}
                            token={name}
                            amount={lpInfo.earned}
                            onClick={getReward}
                            showBtn={v2}
                            btnTitle={t("withdraw")+name}
                        >
                            {/*<MainButton*/}
                            {/*    title={t("exit")+`YNC(${t("old")})`}*/}
                            {/*    onClick={getRewardOld}*/}
                            {/*></MainButton>*/}
                        </LpCard>
                        <LpCard
                            title={t("earned")+"LAVA"}
                            token={"LAVA"}
                            amount={lpInfo.lavaEarned}
                            btnTitle={"为 NYC_USDT_LP 提供流动性"}
                            showBtn={v2}
                            onClick={() => window.open(basisCash.getStakeLpUrl('USDT/'+name,basisCash?.config?.lavaUrl))}
                        >
                        </LpCard>
                        <LpCard
                            title={t("stake")+name+"_USDT_LP"}
                            token={name+"_USDT_LP"}
                            amount={lpInfo.myDepo}
                            btnTitle={approveStatus==ApprovalState.NOT_APPROVED?t("approve")+name+"_USDT_LP":t("stake")+name+"_USDT_LP"}
                            onClick={onSubmit}
                            showBtn={v2}
                        >
                        </LpCard>
                    </CardWrap>
                    {v2 ? <FlexViewCenter>
                        <MainLargeButton
                            onClick={withdrawAll}
                            title={t("exit")}
                        ></MainLargeButton>
                    </FlexViewCenter> : <FlexViewCenter>
                        <MainLargeButton
                            onClick={withDrawOld}
                            title={"提取LP"}
                        ></MainLargeButton>
                    </FlexViewCenter>}
                    <PledgeWrap
                        marginTop={"30px"}
                    >
                        {Fish_lp.map((item)=>{
                            return (
                                <FishNFTRewardPool
                                    // key={'item_'+index}
                                    color={item}
                                ></FishNFTRewardPool>
                            )
                        })}
                    </PledgeWrap>

                </ContentWrap>


            </Content>
        </Page>
    )
})

export default Atlantis;

const InfoWrap = styled.div`
    width:900px;
    background: #FFFFFF;
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.22);
    border-radius: 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding-top:30px;
    padding-bottom:30px;
    margin:0 auto;
    @media (max-width: 768px) {
        width:80%;
  }
`
const H4Title = styled.span`
    font-size:14px;
    font-weight:bold;
    color:${colors["6D6D6D"]};
`
const Amount = styled.span`
    font-size:30px;
    font-weight:800;
    color:${colors.main};
    margin-left:20px;
`
const AmountWrap = styled.div`
    width:700px;
    display:flex;
    align-items:center;
    justify-content:space-around;
    @media (max-width: 768px) {
        width:80%;
        display:block;
    }
`
const InfoContent = styled.div`
   width: 700px;
    border: 1px solid #F27405;
    border-radius: 20px;  
    padding-left:30px; 
    padding-right:30px;  
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    padding-top:20px;
    padding-bottom:10px;
    margin-top:30px;
    @media (max-width: 768px) {
        width:80%;
        display:block;
    }
`
const CardWrap = styled.div`
   display:flex;
   
   flex-wrap:wrap;
   justify-content:space-around;
   max-width:1200px;
   margin-top:60px;
   margin-bottom:30px;
   padding-left:60px;
   padding-right:60px;
    @media (max-width: 768px) {
          padding-left:0px;
            padding-right:0px;
    }
`
const ContentWrap = styled.div`
    position:relative;
    top:-200px;
`
const OldBtnWrap = styled.div`
    width:600px;
    margin:0 auto;
     @media (max-width: 768px) {
       width:100%;
    }
`
